<template>
    <div>
        <!-- <el-form-item :label="$t('name')">
            <el-input v-model="writer.name" disabled />
        </el-form-item>-->
        <el-form-item :label="$t('path')" :prop="$t('path')">
            <el-input v-model="writer.parameter.path" />
        </el-form-item>
        <el-form-item :label="$t('fileName')" :prop="$t('fileName')">
            <el-input v-model="writer.parameter.fileName" />
        </el-form-item>
        <el-form-item :label="$t('writeMode')">
            <el-select v-model="writer.parameter.writeMode" placeholder="Select">
                <el-option v-for="item in writeMode" :key="item" :label="item" :value="item"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item :label="$t('dateFormat')" :prop="$t('dateFormat')">
            <el-input v-model="writer.parameter.dateFormat" />
        </el-form-item>
    </div>
</template>

<script setup>
import { Plus, SemiSelect } from '@element-plus/icons-vue'
import { ref, watch, onBeforeUpdate, nextTick } from "vue";
import { useStore } from 'vuex'

const store = useStore()

const writeMode = ['truncate', 'append', 'nonConflict']
const writer = ref({
    "name": "txtfilewriter",
    "parameter": {
        "path": "",
        "fileName": "",
        "writeMode": "truncate",
        "dateFormat": "yyyy-MM-dd"
    }
})

store.commit('setWriter', writer.value)

watch(
    writer,
    (state, prevState) => {
        store.commit('setWriter', state)
    },
    { deep: true }
)
</script>

<style scoped>
.column-box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}
.remove-icon {
    width: 50px;
    display: flex;
    justify-content: center;
}
</style>